<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head th:replace="common/header :: common_head(~{::title},~{},~{::link},~{})">
    <title th:text="'购买记录_'+${application.website.name}"></title>
    <link rel="stylesheet" href="/css/user.css"/>
</head>
<body class="">

<div th:replace="common/top :: top('')">
</div>
<div class="main box_center cf">
    <div class="userBox cf">
        <div class="my_l">

            <ul class="log_list">
                <li><a class="link_1" href="/user/userinfo.html">个人中心</a></li>
                <li><a class="link_2 on" href="/user/buy_record.html">购买记录</a></li>
                <li><a class="link_4" href="/user/favorites.html">我的书架</a></li>
                <li><a class="link_6" href="/user/comment.html">我的书评</a></li>
                <li><a class="link_7 " href="/user/feedback_list.html">我的反馈</a></li>
                <li><a class="link_8 " href="/user/setup.html">账号设置</a></li>
            </ul>

        </div>
        <div class="my_r">
            <div class="my_bookshelf">
                <div class="title cf">
                    <h2 class="fl"><a href="javascript:void(0);" class="red">购买记录</a></h2>
                </div>

                <div id="divData" class="updateTable">
                    <table cellpadding="0" cellspacing="0">
                        <thead>
                        <tr>

                            <th class="name">
                                书名
                            </th>
                            <th class="id_name">
                                购买章节
                            </th>
                            <th class="time">
                                购买时间
                            </th>
                            <th class="amount">
                                购买金额
                            </th>
                        </tr>
                        </thead>
                        <tbody id="buyRecordList">


                        </tbody>
                    </table>
                    <div class="pageBox cf" id="shellPage">
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div th:replace="common/footer :: footer">
</div>
<div th:replace="common/js :: js"></div>
<script type="text/javascript" src="/javascript/user.js"></script>
<script type="text/javascript">
    // 页面加载完成后执行
    $(function() {
        // 初始化加载第一页数据
        loadBuyRecords(1, 4);
    });

    // 加载购买记录数据
    function loadBuyRecords(curr, limit) {
        $.ajax({
            type: "get",
            url: "/user/listBuyRecordByPage",
            data: {
                'curr': curr,
                'limit': limit
            },
            dataType: "json",
            success: function(data) {
                if (data.code == 200) {
                    var recordList = data.data.list;
                    if (recordList.length > 0) {
                        // 生成购买记录表格HTML
                        var recordHtml = "";
                        for (var i = 0; i < recordList.length; i++) {
                            var record = recordList[i];
                            recordHtml += "<tr>" +
                                "<td class='name'>" +
                                "<a href='/book/" + record.bookId + ".html'>" + record.bookName + "</a>" +
                                "</td>" +
                                "<td class='id_name'>" +
                                "<a href='/book/" + record.bookId + "/" + record.bookIndexName + ".html'>" + record.bookIndexName + "</a>" +
                                "</td>" +
                                "<td class='time'>" + formatTime(record.createTime) + "</td>" +
                                "<td class='amount'>" + record.buyAmount + "书币</td>" +
                                "</tr>";
                        }
                        function formatTime(timeStr) {
                            // 使用Date对象处理
                            const date = new Date(timeStr);
                            // 格式化为YYYY-MM-DD HH:mm:ss
                            return date.toISOString().replace('T', ' ').substring(0, 19);
                        }
                        $("#buyRecordList").html(recordHtml);

                        // 初始化分页
                        layui.use('laypage', function() {
                            var laypage = layui.laypage;

                            // 执行分页渲染
                            laypage.render({
                                elem: 'shellPage', // 分页容器ID
                                count: data.data.total, // 总记录数
                                curr: data.data.pageNum, // 当前页
                                limit: data.data.pageSize, // 每页显示数
                                jump: function(obj, first) {
                                    // 首次不执行
                                    if (!first) {
                                        loadBuyRecords(obj.curr, obj.limit);
                                    }
                                }
                            });
                        });
                    } else {
                        // 没有数据时显示提示
                        $("#buyRecordList").html("<tr><td colspan='4' style='text-align:center;padding:20px;'>暂无购买记录</td></tr>");
                    }
                } else if (data.code == 1001) {
                    // 未登录跳转
                    location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
                } else {
                    layer.alert(data.msg);
                }
            },
            error: function() {
                layer.alert('网络异常，请稍后再试');
            }
        });
    }
</script>
</body>
</html>
